<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body{
      margin: 0;
      height: 100vh;
      overflow: hidden;
    }
    main{
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-around;
      width: 100%;
      height: 100%;
      background: url("http://csssecrets.io/images/tiger.jpg") 0 / cover fixed;
      transition: filter .5s;
    }
    main.blur{
      filter: blur(3px);
    }
    h2{
      color: white;
    }
    dialog{
      width: 200px;
      height: 200px;
      background: white;
      border: none;
      border-radius: 20px;
      box-shadow: 0 .2em .5em rgba(0,0,0,.5),
                  0 0 0 100vmax rgba(0,0,0,.2);
    }
  </style>
</head>
<body>
  <main>
    <h2>通过模糊来弱化背景</h2>
    <button id="btn">dialog</button>
  </main>

  <dialog>
    this is a dialog
    <button id="closeBtn">close</button>
  </dialog>

  <script>
    const dialogBtn = document.getElementById('btn')
    const closeBtn = document.getElementById('closeBtn')

    dialogBtn.onclick = e => {
      document.querySelector('dialog').showModal()
      toggleClass()
    }

    closeBtn.onclick = function() {
      this.parentNode.close()
      toggleClass()
    }

    const toggleClass = () => {
      document.querySelector('main').classList.toggle('blur')
    }
  </script>
</body>
</html>